<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>invalid 事件</title>
<script type="text/javascript">
function invalidHandler(evt){
	// 获取当前被验证的对象
	var validity = evt.srcElement.validity;
	// 检测ValidityState对象的valueMissing属性
	if(validity.valueMissing){
		alert("姓名是必填项，不能为空")
	}	
	// 如果不希望浏览器默认的错误提示方式，可以使用下面的方式取消
	evt.preventDefault();
}
window.onload=function(){
	var name=document.getElementById("name");
	// 注册监听invalid事件
	name.addEventListener("invalid",invalidHandler,false);
}
</script>
</head>
<body>
<div>
  <form action="" method="post">
    姓名：
    <input id="name" name="name" placeholder="First and Last Name" required />
    <input type="submit" value="提交" />
  </form>
  <div id="msg"></div>
</div>
</body>
</html>